<template>
  <CommonQueryLayout class="menu-control">
    <template #default>
      <TableTopControl
        title-text="菜单列表"
        v-model:tableSize="tableStateWrapper.tableSize"
        v-model:tableColumns="tableStateWrapper.tableColumns"
        :loading="isGetMenuListLoading"
        @reload-data="getMenuList"
      >
        <Simbtn
          type="primary"
          @click="addMenu('0')"
          text="新增"
          icon="plus-square-outlined"
        />
      </TableTopControl>
      <a-table
        bordered
        row-key="id"
        :pagination="false"
        :size="tableStateWrapper.tableSize"
        :columns="tableStateWrapper.tableColumns"
        :data-source="tableStateWrapper.tableData"
        :loading="isGetMenuListLoading"
      >
        <template #icon="{ text }">
          <component :is="text" />
        </template>
        <template #menuState="{ text }">
          <a-badge
            :status="text ? 'processing' : 'default'"
            :text="text ? '启用' : '停用'"
          />
        </template>
        <template #operate="{ record }">
          <a-space>
            <a-button
              size="small"
              type="primary"
              @click="addMenu(record.pid, record.level)"
              >新增</a-button
            >
            <a-button size="small" @click="editMenu(record)">编辑</a-button>
            <a-popconfirm
              title="确定删除吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="deleteMenu(record)"
            >
              <a-button size="small" danger type="primary">删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </template>
  </CommonQueryLayout>
  <a-modal
    v-model:visible="editDialogState.visible"
    :title="editDialogState.title"
    :confirm-loading="modifyMenuLoading || insertMenuLoading"
    @ok="handleOk"
    cancelText="取消"
    okText="确认"
  >
    <a-form
      :model="editDialogState.formState"
      ref="editDialogFormRef"
      v-bind="editDialogFormBind"
    >
      <a-form-item disabled label="父ID" name="parentId">
        <a-input
          v-model:value="editDialogState.formState.pid"
          placeholder="输入父级菜单ID"
        />
      </a-form-item>
      <a-form-item label="类型" name="menuType" @change="onMenuTypeChange">
        <a-radio-group
          v-model:value="editDialogState.formState.level"
          button-style="solid"
        >
          <a-radio-button :value="MenuLevel.APP">系统</a-radio-button>
          <a-radio-button :value="MenuLevel.MENU">菜单</a-radio-button>
          <a-radio-button :value="MenuLevel.PAGE">页面</a-radio-button>
          <a-radio-button :value="MenuLevel.BUTTON">按钮</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item :label="`${BtoMText}名称`" name="menuName">
        <a-input
          v-model:value="editDialogState.formState.name"
          placeholder="输入菜单名称"
        />
      </a-form-item>
      <a-form-item label="权限标识" name="menuCode">
        <a-input
          v-model:value="editDialogState.formState.code"
          placeholder="输入权限标识"
        />
      </a-form-item>
      <a-form-item v-if="!isButtonType" :label="`${BtoMText}图标`" name="state">
        <a-select
          v-model:value="editDialogState.formState.icon"
          placeholder="选择菜单图标"
        >
          <a-select-option value>无</a-select-option>
          <template v-for="option in editDialogIconOptions" :key="option.name">
            <a-select-option :value="option.name">
              <a-space>
                <component :is="option.name" />
                {{ option.name }}
              </a-space>
            </a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item v-if="!isButtonType" label="路由地址" name="path">
        <a-input
          v-model:value="editDialogState.formState.path"
          placeholder="输入路由地址"
        />
      </a-form-item>
      <a-form-item label="状态" name="menuState">
        <a-radio-group v-model:value="editDialogState.formState.enabled">
          <a-radio :value="MenuState.ON">启用</a-radio>
          <a-radio :value="MenuState.OFF">停用</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { MenuLevel, MenuState } from '@/api/userCenter/system/model/menuModel'
// import { BtnPerm } from './types'

import useSearchMenu from './hooks/useSearchMenu'
import useOperateMenu from './hooks/useOperateMenu'

import CommonQueryLayout from '@/layout/CommonQueryLayout.vue'
import { TableTopControl } from '@/components/TopControl'
import { Simbtn } from '@/components/Button'

// 搜索菜单相关逻辑
const { tableStateWrapper, getMenuList, isGetMenuListLoading } = useSearchMenu()

// 操作菜单相关逻辑
const {
  editDialogState,
  editMenu,
  onMenuTypeChange,
  editDialogFormRef,
  editDialogFormBind,
  editDialogIconOptions,
  addMenu,
  isButtonType,
  BtoMText,
  handleOk,
  modifyMenuLoading,
  insertMenuLoading,
  deleteMenu,
} = useOperateMenu(getMenuList)

onMounted(async () => {
  await getMenuList()
})
</script>

<style lang="scss" scoped>
@include b(menu-control) {
}
</style>
